<template>
	<view class="conter">
		<header-box :title="title"></header-box>
		<view class="box1">
			<view class="flex-box data">
				<view class="">
					日期
				</view>
				<view class="flex-center">
					{{$u.timeFormat(dataTime, 'yyyy-mm-dd  hh:MM')}}
				</view>
			</view>
			<view class="flex-box data">
				<view class="">
					仓库
				</view>
				<view class="flex-center">
					{{stockName}}
				</view>
			</view>
		</view>



		<view class="box2">
			<view class="box3">
				<view class="box-center f30">
					<view class="f-1 ">
						商品
					</view>
					<view class="f-1 text-center">
						库存数
					</view>
					<view class="f-1 text-center">
						盘点数
					</view>
					<view class="f-1 text-center">
						盈亏数
					</view>
				</view>
			</view>
			<view class="bor-top" v-for="(item, index) in stockList" :key="index" @tap="pandian(item,index)">
				<view class="box-center1 f30">
					<view class="f-1 ">
						<image style="width: 100rpx; height: 100rpx;" :src="img + item.image" mode=""></image>
					</view>
					<view class="f-1 text-center">
						{{item.stock_num}}
					</view>
					<view class="f-1 text-center" style="color: #7278EC">
						{{item.check_num ? item.check_num : 0}}
						<!-- check_num 盘点数        减        库存 num       // init 有三种 init>0 入库 init=0 init<0    出库         -->
					</view>
					<view class="f-1 text-center fs24" style="color: #7278EC">
						{{item.check_num - item.stock_num ? item.check_num - item.stock_num : 0}}
						<!-- item.inputInfo ? item.inputInfo -->
					</view>
				</view>
				<view class="flex-box" style="padding-bottoms: 30rpx; height: 70rpx;">
					<view style="width: 220rpx;">{{item.name}}</view>
					<view class="" style="margin-right: 20rpx;">
						单位: {{item.unit_name}}
					</view>
				</view>
			</view>
		</view>

		<view v-if="btn == 1" class="bg-gradual-green sear-box" @tap="addCheck">
			<!-- @click="addCheck" -->
			保存盘点
		</view>

		<!-- <view class="bg-gradual-green sear-box" @tap="goBack">
			@click="addCheck"
			查看盘点列表
		</view> -->





		<!-- 弹框输入数量 -->
		<u-popup v-model="showPopup" mode="center" width="580rpx" height="300rpx" border-radius="20">
			<view class="popup-title">
				盘点 - {{nameClass}}
			</view>
			<view class="popup-box">
				<input type="text" v-model="check_num" placeholder="请输入" placeholder-style="padding-right: 0" />
			</view>
			<view class="popup-border flex-around">
				<view class="" @click="showPopup = false" style="background-color: #CCCCCC; border-radius: 30rpx;">
					取消
				</view>
				<view class="bg-gradual-green" style="border-radius: 30rpx;" @tap="addPandian">
					确定
				</view>
			</view>
		</u-popup>



		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>


	</view>
</template>

<script>
	import headerBox from '../../components/header/header.vue'

	export default {
		components: {
			headerBox
		},
		data() {
			return {
				title: '盘点单',
				texList: [{
					text: '商品',
					class: '单位：件',
					stock: '51',
				}],
				showPopup: false,
				showPopup1: false,
				stockName: '',
				stockList: [],
				balance: 0,
				id: '',
				dataTime: '',
				stockId: '',
				numberIfo: '',
				listIndex: '',
				nameClass: '',
				check_num: '',
				listNameInfo: [],
				img: this.$images,
				btn: 1,
				arrList: {},
			}
		},
		onLoad(e) {
			// this.stockName = uni.getStorageSync('stockName');
			// this.id = uni.getStorageSync('stockId');
			this.stockId = e.id
			this.stockName = e.name
			this.getStockList()

		},
		onShow() {
			this.dataTime = Date.parse(new Date()) / 1000;
		},
		methods: {
			// 仓库列表
			async getStockList() {
				const res = await this.$u.post("api/Invoic/store_info?store_id=" + this.stockId)
				this.stockList = res.data

			},

			pandian(item, index) {
				this.nameClass = item.name
				this.showPopup = true
				this.check_num = ''
				this.listIndex = index
				this.arrList = item
				// this.listNameInfo.push(item)
			},

			goBack() {
				uni.navigateBack({
					delta: 2,
				})
			},

			addPandian() {
				this.showPopup = false
				this.stockList[this.listIndex].check_num = this.check_num
				this.stockList[this.listIndex].inputInfo = Number(this.check_num) - this.stockList[this.listIndex].num
				var init = this.stockList[this.listIndex].inputInfo
				var numInit = Math.abs(init)
				this.listNameInfo.push(this.arrList)

			},

			// 保存
			async addCheck() {
				this.btn = 22
				this.listNameInfo.forEach((item, index, i) => {
					delete item.borrow_num
					delete item.createtime
					delete item.inputInfo
					delete item.name
					delete item.image
					delete item.image
					delete item.unit_name
					delete item.updatetime
					delete item.sales_num
					item.yk_num = item.check_num - item.stock_num
				})
				this.filterList(this.listNameInfo, 'goods_id')

				console.log('1111', this.listNameInfo)
				const res = await this.$u.post("api/Invoic/check_add", {
					store_id: this.stockId,
					goods: JSON.stringify(this.listNameInfo),
				})
				if (res.code != 1) {
					this.btn = 1
					this.$tools.msg('保存失败')
				} else {
					if (res.code == 1) {
						this.btn = 1
						this.$tools.msg('盘点成功！')
						uni.navigateBack({
							delta: 2
						})
					}
				}
			},

			filterList(arr3) {


				let deWeightThree = () => {
					let map = new Map();
					for (let item of arr3) {
						if (!map.has(item.goods_id)) {
							map.set(item.goods_id, item);
						}
					}
					return [...map.values()];
				}
				this.listNameInfo = deWeightThree();
				console.log('%c%s', 'color:red;', '方法三：es6,newArr3', this.listNameInfo);

			}



		}
	}
</script>

<style lang="scss" scoped>
	.conter {
		width: 100%;
		height: 100%;
		position: relative;
		padding-bottom: 100rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.box1 {
			width: 90%;
			height: 182rpx;
			// height: 92rpx;
			margin: 30rpx auto;
			padding: 0 35rpx;
			color: #333333;
			font-size: 28rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.data {
				width: 100%;
				height: 86rpx;
				border-bottom: 1rpx solid #F0F0F0;

				.data-image {
					width: 22rpx;
					height: 36rpx;
					margin-left: 12rpx;
				}
			}

			.data:last-child {
				border-bottom: 0;
			}
		}

		.box2 {
			width: 90%;
			margin: 30rpx auto;
			padding-left: 35rpx;
			color: #333333;
			font-size: 28rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.box3 {
				width: 100%;
				padding-bottom: 10rpx;
			}

			.box-center-box {
				width: 100%;
				font-weight: 700;
				font-family: PingFang SC;
				padding-bottom: 30rpx;
				// border-bottom: 1rpx solid #F5F5F5;

				.color-size {
					color: #FFFFFF;
				}
			}

			.box3:last-child {
				border-bottom: 0;
			}

			.box-center {
				color: #000000;
				font-weight: bold;
				padding-top: 30rpx;
				display: flex;
				font-family: PingFang SC;
				align-items: center;
				justify-content: space-between;
			}

			.box-center1 {
				color: #000000;
				padding-top: 30rpx;
				display: flex;
				font-family: PingFang SC;
				align-items: center;
				justify-content: space-between;
			}

			.bor-top {
				padding-top: 10rpx;
				border-top: 1rpx solid #F5F5F5;

				.add-class {
					font-size: 26rpx;
					height: 50rpx;
					line-height: 50rpx;
				}
			}


		}


		.bor-bot {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 100%;
			height: 120rpx;
			z-index: 100;
			padding: 0 30rpx;
			background-color: #FFFFFF;

			.bor-bot1 {
				width: 30%;
				// margin: 0 auto;
				text-align: center;

				.bor-image {
					margin: 0 auto;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}



		.sear-box {
			position: fixed;
			left: 50%;
			bottom: 40rpx;
			width: 90%;
			height: 70rpx;
			line-height: 70rpx;
			color: #FFFFFF;
			text-align: center;
			transform: translateX(-50%);
			border-radius: 35rpx;
		}



		// 弹框
		.popup-title {
			height: 96rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 96rpx;
		}

		.popup-box {
			width: 80%;
			height: 70rpx;
			margin: 0 auto;
			border-radius: 10rpx;
			background-color: #F5F5F5;

			input {
				width: 100%;
				height: 100%;
				padding-left: 31rpx;
			}
		}

		.popup-border {
			display: flex;
			margin-top: 35rpx;

			view {
				width: 30%;
				height: 60rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
			}
		}


		.shop-box {
			width: 100%;
			height: 98rpx;
			line-height: 98rpx;
			padding: 0 30rpx;
			font-size: 24rpx;
			background-color: #F5F5FA;
			font-family: PingFang SC;
		}

		.box-shop {
			width: 100%;
			padding: 0 30rpx;

			.shopping-info {
				border-bottom: 1rpx solid #F5F5F5;

				.heig-shop {
					height: 70rpx;
					line-height: 70rpx;
				}
			}

			.shopping-info:last-child {
				border-bottom: 0;
			}
		}

	}
</style>
